<template>
	<view class="content">
		<view style="background-color: #fff;">
			<view class="statusBar"></view>
		</view>
		<view v-if="share_key" @click="returnIndex" class="return">
			<u-icon name="home" color="#fff" size="44"></u-icon>
		</view>
		<view v-else @click="back()" class="return">
			<u-icon name="arrow-left" color="#fff" size="44"></u-icon>
		</view>
		<u-swiper :list="product.images" :autoplay="true" height="750" mode='number' indicator-pos='bottomRight'>
		</u-swiper>
		<!-- 正常商品 -->
		<view v-if="skuType == 0"
			style="display: flex; align-items: center;justify-content: space-between;padding: 20rpx 40rpx;background-color: #fff;">
			<view style="display: flex;flex-direction: row;align-items:baseline;">
				<price size="36rpx" v-if="skuPrice != ''" :price="skuPrice"></price>
				<view style="margin-left: 20rpx;" v-if="product.vip == 0">
					<view style="text-decoration: line-through;font-size: 20rpx;color: #999;">原价
						{{product.market_price}}
					</view>
				</view>
				<view style="margin-left: 20rpx;" v-if="product.vip == 1">
					<view style="font-size: 20rpx;color: #333;font-weight: bold;display: flex;flex-direction: row;">
						{{product.vip_price}}
						<u-image style="margin-left: 4rpx;" width="56rpx" height="18rpx"
							src="https://img.koalalf.com/plus.png">
						</u-image>
					</view>
				</view>
			</view>
			<view style="color: #999;font-size: 24rpx;">已销 {{product.sales}} 件</view>
		</view>
		<!-- 秒杀商品 -->
		<view v-if="skuType == 1" style="background-color: #fff;padding-bottom: 20rpx;">
			<view
				style="background-image: url(https://img.koalalf.com/index/miaosha-bg.png); width: 750rpx; height: 103rpx;background-size: 100%;position: relative;">
				<view style="position: absolute;top: 12rpx;left: 230rpx;">
					<price size="60rpx" leftSize="24rpx" textColor="#fff" v-if="skuPrice != ''" :price="skuPrice">
					</price>
				</view>
				<view
					style="position: absolute;top: 56rpx;font-size: 20rpx;left: 486rpx;font-weight: bold;color: #F3141B;width: 176rpx;display: flex;justify-content: space-around;">
					<text>{{shengyuH}}</text>
					<text style="margin: 0 50rpx;">{{shengyuM}}</text>
					<text>{{shengyuS}}</text>
				</view>
			</view>
		</view>
		<view style="padding-bottom: 20rpx;background-color: #fff;">
			<view class="goods-item-title" style="background-color: #fff;">
				<!-- <u-icon style="margin-right: 4rpx;" size="34" custom-prefix="gewu" name="ziying">
				</u-icon> -->
				{{product.title}}
			</view>
		</view>

		<view
			style="display: flex;justify-content: space-between;padding: 40rpx;background-color: #fff;margin-top: 20rpx;"
			@click="guigePopupShowFn()">
			<text style="margin-right: 40rpx; font-weight: bold;font-size: 24rpx;">已选</text>
			<view style="flex: 1;padding-right: 20rpx;font-size: 24rpx;">{{skuText}}</view>
			<u-icon style="margin-right: 4rpx;" size="40" name="more-dot-fill">
			</u-icon>
		</view>

		<!-- 视频展示 -->
		<view style="background-color: #fff; margin-top: 20rpx;" v-if="product.video">
			<view style="display: flex;flex-direction: row;align-items: center;padding: 40rpx 20rpx 20rpx 20rpx;">
				<view style="background-color: #d9501b; width: 8rpx; height: 30rpx;margin-right: 20rpx;"></view>
				<text style="font-size: 32rpx; font-weight: bold;">视频展示</text>
			</view>
			<view style="font-size: 0;display: flex;align-items: center;justify-content: center;padding-bottom: 20rpx;">
				<video style="width: 710rpx;" :src="product.video" :autoplay="true"
					:muted="true"></video>
			</view>
		</view>

		<view style="background-color: #fff; margin-bottom: 100rpx;margin-top: 20rpx;">
			<view style="display: flex;flex-direction: row;align-items: center;padding: 40rpx 20rpx 20rpx 20rpx;">
				<view style="background-color: #d9501b; width: 8rpx; height: 30rpx;margin-right: 20rpx;"></view>
				<text style="font-size: 26rpx; font-weight: bold;">图文详情</text>
			</view>
			<view style="font-size: 0;">
				<u-image v-for="(item,index) in product.content" mode="widthFix" height="100%" :key="index" width="100%"
					:src="item"></u-image>
			</view>
		</view>

		<view class="navigation">
			<view class="left" style="padding-left: 20rpx;">
				<!-- <view class="item" @click="returnIndex()">
					<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">首页</view>
				</view> -->
				<!-- <view class="item" @click="modelShowFn(product.id, product.type, '')">
					<u-icon name="share" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">分享</view>
				</view> -->
				<view class="item" @click="collection(product.id)">
					<!-- <u-badge class="car-num" :count="9" type="error" :offset="[-3, -6]"></u-badge> -->
					<!-- <u-icon v-if="product.is_collection == 0" name="star" :size="40" :color="$u.color['contentColor']">
					</u-icon>
					<view v-if="product.is_collection == 0" class="text u-line-1">收藏</view>

					<u-icon v-if="product.is_collection == 1" name="star" :size="40" color="#feab11"></u-icon>
					<view v-if="product.is_collection == 1" class="text u-line-1" style="color: #feab11;">收藏</view> -->
				</view>
			</view>
			<view class="right">
				<view class="cart btn" @click="createCarts">
					加入购物车</view>
				<view class="buy btn" @click="createOrder">立即购买
				</view>
			</view>
		</view>

		<u-popup :show="shareModelShow" mode="bottom" :safe-area-inset-bottom="true" :closeable="false">
			<view
				style="display: flex;justify-content: center;flex-direction: column;align-items: center;padding: 20rpx;">
				<u-image width="400rpx" mode="widthFix" :src="shareImage"></u-image>
				<u-line color="#c5c5c5" length="750rpx"></u-line>
				<view
					style="display: flex;flex-direction: row; justify-content: space-around; width: 400rpx;margin-top: 40rpx;">
					<button @click="saveFile()" :plain="true"
						style="display: flex;flex-direction: column;justify-content: center;align-items: center; border: none;">
						<u-image width="100rpx" mode="widthFix" src="https://img.koalalf.com/share/haibao.png">
						</u-image>
						<text style="margin-top: -24rpx;font-size: 24rpx; color: #333;">保存海报</text>
					</button>
					<button :plain="true"
						style="display: flex;flex-direction: column;justify-content: center;align-items: center; border: none;"
						open-type="share">
						<u-image width="100rpx" mode="widthFix" src="https://img.koalalf.com/share/xiaochengxu.png">
						</u-image>
						<text style="margin-top: -24rpx;font-size: 24rpx; color: #333;">分享小程序</text>
					</button>
				</view>
			</view>
		</u-popup>

		<u-popup :show="guigePopupShow" closeable mode="bottom" @close="guigePopupClose">
			<view style="margin-bottom: 200rpx;padding: 40rpx;">
				<view style="margin-bottom: 40rpx;display: flex;flex-direction: row;align-items: flex-end;">
					<u-image mode="widthFix" width="200rpx" height="200rpx" :src="skuImage"></u-image>
					<view style="margin-left: 20rpx;">
						<price size="36rpx" v-if="skuPrice != ''" :price="skuPrice"></price>
						<text style="font-size: 22rpx; color: #ccc;">已选:{{skuText}}</text>
					</view>
				</view>
				<u-line color="#f1f1f1" length="100%" />
				<view style="max-height: 600rpx;overflow-y: scroll;">
					<view v-for="(item, index) in product.sku_value" :key="index" style="margin-top: 40rpx;">
						<view style="font-size: 32rpx; font-weight: bold;margin-bottom: 40rpx;">{{item.name}}</view>
						<view style="display: flex;flex-direction: row;flex-wrap: wrap;">
							<view @click="selectAttr(item, skuItem)" v-for="(skuItem, skuIndex) in item.list"
								:key="skuIndex">
								<view v-if="skuItem.select == 1"
									style="margin-bottom: 20rpx;background-color: #FA3534;padding: 10rpx 20rpx;margin-right: 20rpx;border-radius: 10rpx;color: #fff;font-size: 24rpx;">
									{{skuItem.value}}
								</view>
								<view v-else
									style="margin-bottom: 20rpx;background-color: #f5f5f5;padding: 10rpx 20rpx;margin-right: 20rpx;border-radius: 10rpx;font-size: 24rpx">
									{{skuItem.value}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="margin-top: 40rpx;">
					<view style="font-size: 32rpx; font-weight: bold;margin-bottom: 40rpx;">数量</view>
					<u-number-box min=1 step=1 :integer="true" inputWidth="100" v-model="numberValue"
						@change="valChange">
						<view slot="minus" class="minus">
							<u-icon name="minus" size="18"></u-icon>
						</view>
						<text slot="input" style="width: 80rpx;text-align: center;font-size: 24rpx;" class="input">{{numberValue}}</text>
						<view slot="plus" class="plus">
							<u-icon name="plus" color="#FFFFFF" size="18"></u-icon>
						</view>
					</u-number-box>
				</view>
			</view>

			<view class="navigation" style="z-index: 100;">
				<view v-if="guigePopupBottom == 0" class="right"
					style="width: 100%;justify-content: center;margin-right: -20rpx;">
					<view class="cart btn" style="text-align: center;" @click="createCarts">加入购物车
					</view>
					<view class="buy btn" style="text-align: center;" @click="createOrder">立即购买
					</view>
				</view>
				<view v-if="guigePopupBottom == 1" class="right" style="width: 100%;justify-content: space-around">
					<view class="cart-confirm btn u-line-1" style="width: 80%;text-align: center;"
						@click="confirmCreateCarts()">确认</view>
				</view>
				<view v-if="guigePopupBottom == 2" class="right" style="width: 100%;justify-content: space-around">
					<view class="cart-confirm btn u-line-1" style="width: 80%;text-align: center;"
						@click="confirmCreateOrder()">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import imagesUrl from '../../common/images.js'
	import price from "../../components/price.vue"

	import {
		goodsInfo,
		goodsCollection,
		createOrder,
		createCarts,
		shareImage
	} from "../../common/shopmall.api.js"

	export default {
		components: {
			price
		},
		data() {
			return {
				product: {
					product_detail: {}
				},
				images: {},
				guigePopupShow: false,
				modelShow: false,
				shareModelShow: false,
				shareImage: '',
				skuImage: '',
				skuPrice: '',
				skuSeckillPrice: 0,
				skuAttrPath: '',
				numberValue: 1,
				skuText: "请选择规格",
				skuId: 0,
				skuType: 0,
				guigePopupBottom: 0,

				shengyuD: '00',
				shengyuH: '00',
				shengyuM: '00',
				shengyuS: '00',

				share_key: '',
				
				selectSkuId: []
			}
		},
		onLoad({
			id,
			type,
			share_key
		}) {
			let that = this;
			goodsInfo({
				product_id: id,
				type
			}).then(res => {
				console.log(res)
				for (let i = 0; i < res.sku_value.length; i++) {
					res.sku_value[i].list[0].select = 1
					that.selectSkuId.push(res.sku_value[i].list[0].id)
				}
				that.product = res
				that.skuImage = res.thumb
				that.skuPrice = res.sales_price

				that.skuId = that.selectSkuId.join('-')
				that.skuValue()

				if (that.skuType == 1 && that.product.seckill_end_time) {
					setInterval(function() {
						that.shengyuTime(that.product.seckill_end_time)
					}, 1000)
				}
			})

			this.share_key = share_key
			this.images = imagesUrl.product

			// this.modelShowFn(id, type, '')
		},
		methods: {
			// 收藏
			collection() {
				let that = this;
				goodsCollection({
					goods_id: that.goods.id,
				}).then(res => {
					if (that.goods.is_collection == 0) {
						that.$u.toast('收藏成功');
						that.goods.is_collection = 1
					} else {
						that.$u.toast('取消收藏成功');
						that.goods.is_collection = 0
					}
				})
			},
			createOrder() {
				let that = this;
				if (this.skuId) {
					this.confirmCreateOrder()
				} else {
					that.guigePopupShow = true
					that.guigePopupBottom = 2
				}
			},
			guigePopupClose() {
				this.guigePopupShow = false
				this.guigePopupBottom = 0
			},
			confirmCreateOrder() {
				let that = this;
				createOrder({
					product_sku_id: that.skuId,
					quantity: that.numberValue
				}).then(res => {
					that.guigePopupShow = false
					that.guigePopupBottom = 0
					that.$u.route({
						url: "pages/orders/createOrder",
						params: {
							data: JSON.stringify(res)
						}
					})
				})
			},
			createCarts() {
				if(this.skuId){
					this.confirmCreateCarts()
				}else{
					this.guigePopupShow = true
					this.guigePopupBottom = 1
				}
			},
			confirmCreateCarts() {
				let that = this;
				let cartsQuantity = 0;

				if (that.product.carts && that.product.carts.length > 0) {
					for (let i = 0; i < that.product.carts.length; i++) {
						if (that.product.carts[i].product_sku_id == that.skuId) {
							cartsQuantity = that.product.carts[i].quantity
						}
					}
				}

				let quantity = that.numberValue + cartsQuantity
				createCarts({
					product_sku_id: that.skuId,
					quantity: quantity
				}).then(res => {
					if (!that.product.carts || that.product.carts.length == 0) {
						if (!that.product.carts) {
							that.product.carts = []
						}
						that.product.carts.push({
							quantity: quantity,
							product_sku_id: that.skuId,
							product_id: that.product.id
						})
					} else {
						for (let i = 0; i < that.product.carts.length; i++) {
							if (that.product.carts[i].product_sku_id == that.skuId) {
								that.product.carts[i].quantity = quantity
							}
						}
					}
					that.guigePopupBottom = 0
					that.guigePopupShow = false
					that.$u.toast('加入购物车成功');
					uni.$emit('changeCarts', {
						msg: '更新购物车'
					});
				})
			},
			valChange(e) {
				this.numberValue = e.value
				this.skuValue()
			},
			selectAttr(item, selectAttr) {
				let sIndex = 0
				for(let i = 0; i < this.product.sku_value.length; i++){
					for(let j = 0; j < this.product.sku_value[i].list.length; j++){
						if(item.name == this.product.sku_value[i].name){
							this.product.sku_value[i].list[j].select = 0
						}
						if(this.product.sku_value[i].list[j].id == selectAttr.id){
							this.product.sku_value[i].list[j].select = 1
							this.selectSkuId[sIndex] = selectAttr.id
						}
					}
					sIndex++
				}
				
				
				this.skuId = this.selectSkuId.join("-")
				
				this.guigePopupBottom = 0
				
				this.skuValue()
			},

			skuValue() {
				this.skuAttrPath = ''
				this.skuText = ''
				for (let i = 0; i < this.product.sku.length; i++) {
					if(this.skuId == this.product.sku[i].sku){
						this.skuPrice = this.product.sku[i].sales_price
						if(this.product.sku[i].url ){
							this.skuImage = this.product.sku[i].url
						}
						
						for(let i = 0; i < this.product.sku_value.length; i++){
							this.skuText += this.product.sku_value[i].name + ':'
							for(let j = 0; j < this.product.sku_value[i].list.length; j++){
								if(this.product.sku_value[i].list[j].select == 1){
									this.skuText += this.product.sku_value[i].list[j].value
								}
							}
							this.skuText += ';'
						}
						
					}
				}
				
				if(this.skuText == ''){
					this.skuText = '请选择规格';
				}else{
					this.skuText += "数量:" + this.numberValue
				}
			},

			guigePopupShowFn() {
				this.guigePopupShow = true
			},
			modelShowFn(goodsId, type, searchId) {
				let that = this;
				shareImage({
					goods_id: goodsId,
					type,
					search_id: searchId
				}).then(res => {
					that.shareImage = res
					that.shareModelShow = true
				})
			},
			back() {
				this.$u.route({
					type: 'navigateBack'
				})
			},
			copy(text) {
				let that = this;
				uni.setClipboardData({
					data: text,
					success: function() {},
				});
			},

			returnIndex() {
				this.$u.route({
					type: 'switchTab',
					url: 'pages/index/index'
				})
			},

			onShareAppMessage(res) {
				let title = "[好友推荐]" + this.goods.title
				if (res.from === 'button') { // 来自页面内分享按钮
					return {
						title: title,
						path: '/pages/product/goodsDetail?share_key=' + this.share_key + "&id=" + this.goods.id +
							"&type=" + this.goods.type,
						imageUrl: this.goods.goods_detail.share_image
					}
				}
				return {
					title: title,
					path: '/pages/product/goodsDetail?share_key=' + this.share_key + "&id=" + this.goods.id + "&type=" +
						this.goods.type,
					imageUrl: this.goods.goods_detail.share_image
				}
			},

			saveFile() {
				let that = this;

				uni.showLoading({
					title: '正在保存'
				})
				uni.downloadFile({
					url: that.shareImage,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function(res) {
									that.$refs.uToast.show({
										title: '保存成功',
										type: 'success',
									})

									uni.hideLoading()
								},
								fail: function(error) {
									that.$refs.uToast.show({
										title: '保存失败' + error.errMsg,
										type: 'error',
									})

									uni.hideLoading()
								}
							});
						}
					},
					fail: function(err) {
						uni.hideLoading()
					},
					complete: function() {
						uni.hideLoading()
					}
				});
			},

			shengyuTime(date) {
				let endTime = new Date(date).getTime()
				let nowTime = new Date().getTime()

				let shenyu = endTime - nowTime
				let shengyuD = parseInt(shenyu / (60 * 60 * 24 * 1000)); //转换为天

				let D = parseInt(shenyu) - parseInt(shengyuD * 60 * 60 * 24 * 1000); //除去天的毫秒数

				let shengyuH = parseInt(D / (60 * 60 * 1000)); //除去天的毫秒数转换成小时

				let H = D - shengyuH * 60 * 60 * 1000; //除去天、小时的毫秒数

				let shengyuM = parseInt(H / (60 * 1000)); //除去天的毫秒数转换成分钟

				let M = H - shengyuM * 60 * 1000; //除去天、小时、分的毫秒数

				let shengyuS = parseInt((shenyu - shengyuD * 60 * 60 * 24 * 1000 - shengyuH * 60 * 60 * 1000 - shengyuM *
						60 * 1000) /
					1000); //除去天、小时、分的毫秒数转化为秒

				this.shengyuD = shengyuD;
				this.shengyuH = shengyuH < 10 ? '0' + shengyuH : shengyuH;
				this.shengyuM = shengyuM < 10 ? '0' + shengyuM : shengyuM;;
				this.shengyuS = shengyuS < 10 ? '0' + shengyuS : shengyuS;;
			}
		}
	}
</script>

<style lang="scss" scoped>
	body {
		background-color: #f5f5f5;
		font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
	}

	.content {
		background-color: #f5f5f5;
	}

	.statusBar {
		padding-top: calc(var(--status-bar-height) + 12rpx);
		background-color: #fff;
		width: 100%;
	}

	.slot-content {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
		flex-direction: column;
	}

	.return {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 40rpx;
		top: 98rpx;
		z-index: 1;
	}

	.quan-color {
		background-image: -webkit-linear-gradient(bottom, #EAC99B, #EAC99B, #E3B87D);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.goods-item-title {
		padding: 0 40rpx;
		font-size: 28rpx;
		font-weight: bold;
		height: 86rpx;
		overflow: hidden;
	}

	.solgn {
		display: flex;
		flex-direction: row;
		background-color: #fff;
		padding: 40rpx 40rpx;
		align-items: flex-start;
	}

	.navigation {
		position: fixed;
		width: 100%;
		bottom: 0;
		display: flex;
		// margin-top: 100rpx;
		// border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
		justify-content: space-between;
		padding-bottom: 40rpx;

		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 20rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			padding-right: 20rpx;

			.btn {
				// line-height: 70rpx;
				height: 76rpx;
				width: 146rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 35rpx;
				// border-radius: 36rpx;
				color: #ffffff;
			}

			.buy {
				// background-color: #ff7900;
				background-image: url(https://img.koalalf.com/ljgm.png);
				background-size: 100%;
			}

			.cart {
				// background-color: #ed3f14;
				// margin-right: 30rpx;
				background-image: url(https://img.koalalf.com/jrgwc.png);
				background-size: 100%;
				font-size: 24rpx;
			}

			.cart-confirm {
				background-color: #ed3f14;
				margin-right: -20rpx;
				border-radius: 66rpx;
			}

		}
	}


	.minus {
		width: 34rpx;
		height: 34rpx;
		border-width: 2rpx;
		border-color: #f5f5f5;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 34rpx;
		height: 34rpx;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>
